| Flutter使用TabBar问题小结 | 您所在的位置：网站首页 › flutter tabbar指示器 › Flutter使用TabBar问题小结 |
Flutter使用TabBar问题小结
|
此章总结一下在Flutter项目中，使用TabBar遇到的一些问题。 TabBar取消下划线TabBar自带下划线，若要取消的话让indicator属性等于新的BoxDecoration即可 TabBar( indicator: const BoxDecoration(), .... ) iPhone X系列底部横条重叠当TabBar放在底部，作为bottomNavigationBar的时候，会被iPhoneX的底部横条覆盖，解决办法是使用SafeArea空间包住TabBar @override Widget build(BuildContext context) { return Scaffold( ..... //此处代码省略 bottomNavigationBar: Container( child: SafeArea( child: TabBar( controller: controller, ..... ), ), ), ); } 自定义的Tab图标点击变化Tab的图标如果使用的是Icon，则自带点击图标变化效果。但如果用的是自定义Image，则需要通过setState管理Image引用的资源才能实现其效果。全部代码如下 class _MyHomePageState extends State with SingleTickerProviderStateMixin { TabController controller; //底部导航控制器 int _currentIndex = 0; //选中位置 String tab1Res; //Tab1的图片资源 String tab2Res; //Tab2的图片资源 @override void initState() { super.initState(); //初始化默认图片资源 tab1Res = 'assets/images/ic_groups_activated.png'; tab2Res = 'assets/images/ic_me.png'; controller = TabController(length: 2, vsync: this); //TabBar监听器 controller.addListener(() => _onTabChanged()); } @override Widget build(BuildContext context) { return Scaffold( ..... //此处代码省略 bottomNavigationBar: Container( height: 55, decoration: BoxDecoration(color: Colors.white, boxShadow: [ BoxShadow(color: const Color(0xFFd0d0d0), blurRadius: 1.0) ]), child: SafeArea( child: TabBar( controller: controller, tabs: [ Tab( text: "Tab1", icon: Image.asset(tab1Res, width: 30, height: 30)), Tab( text: "Tab2", icon: Image.asset(tab2Res, width: 30, height: 30)), ], ), ), ), ); } /* 底部导航点击事件 */ _onTabChanged() { if (controller.indexIsChanging) { if (this.mounted) { this.setState(() { switch (controller.index) { case 0: tab1Res = 'assets/images/ic_groups_activated.png'; tab2Res = 'assets/images/ic_me.png'; break; case 1: tab1Res = 'assets/images/ic_groups.png'; tab2Res = 'assets/images/ic_me_activated.png'; break; } _currentIndex = controller.index; }); } } } } 监听TabBar点击要判断其是否是位置变化和组件是否挂载Controller监听器不仅仅是点击的监听，还有Axis变化等监听，需要双重判断 /* 底部导航点击事件 */ _onTabChanged() { if (controller.indexIsChanging) { //判断是否是选中位置发生变化 if (this.mounted) { //判断组件是否已被挂载 this.setState(() { switch (controller.index) { case 0: tab1Res = 'assets/images/ic_groups_activated.png'; tab2Res = 'assets/images/ic_me.png'; break; case 1: tab1Res = 'assets/images/ic_groups.png'; tab2Res = 'assets/images/ic_me_activated.png'; break; } _currentIndex = controller.index; }); } } }大家可以关注下我的微信公众号，谢谢 |
【本文地址】
公司简介
联系我们